<select multiple id="multiselect-custom" class="multiselect" name="multiselect-custom[]"> <option value="elem_1" selected>elem 1</option> <option value="elem_2">elem 2</option> <option value="elem_3">elem 3</option> <option value="elem_4">elem 4</option> <option value="elem_5">elem 5</option> <option value="elem_6">elem 6</option> <option value="elem_7">elem 7</option> <option value="elem_8">elem 8</option> <option value="elem_9">elem 9</option> <option value="elem_10">elem 10</option> <option value="elem_11">elem 11</option> <option value="elem_12">elem 12</option> <option value="elem_13">elem 13</option> <option value="elem_14">elem 14</option> <option value="elem_15">elem 15</option> <option value="elem_16">elem 16</option> <option value="elem_17">elem 17</option> <option value="elem_18">elem 18</option> <option value="elem_19">elem 19</option> <option value="elem_20">elem 20</option> <option value="elem_21">elem 21</option> <option value="elem_22">elem 22</option> <option value="elem_23">elem 23</option> <option value="elem_24">elem 24</option> <option value="elem_25">elem 25</option> <option value="elem_26">elem 26</option> <option value="elem_27">elem 27</option> <option value="elem_28">elem 28</option> <option value="elem_29">elem 29</option> <option value="elem_30">elem 30</option> <option value="elem_31">elem 31</option> <option value="elem_32">elem 32</option> <option value="elem_33">elem 33</option> <option value="elem_34">elem 34</option> <option value="elem_35">elem 35</option> <option value="elem_36">elem 36</option> <option value="elem_37">elem 37</option> <option value="elem_38">elem 38</option> <option value="elem_39">elem 39</option> <option value="elem_40">elem 40</option> <option value="elem_41">elem 41</option> <option value="elem_42" selected>elem 42</option> <option value="elem_43">elem 43</option> <option value="elem_44">elem 44</option> <option value="elem_45">elem 45</option> <option value="elem_46">elem 46</option> <option value="elem_47">elem 47</option> <option value="elem_48">elem 48</option> <option value="elem_49">elem 49</option> <option value="elem_50">elem 50</option> <option value="elem_51">elem 51</option> <option value="elem_52">elem 52</option> <option value="elem_53">elem 53</option> <option value="elem_54">elem 54</option> <option value="elem_55">elem 55</option> <option value="elem_56">elem 56</option> <option value="elem_57">elem 57</option> <option value="elem_58">elem 58</option> <option value="elem_59">elem 59</option> <option value="elem_60">elem 60</option> <option value="elem_61">elem 61</option> <option value="elem_62">elem 62</option> <option value="elem_63">elem 63</option> <option value="elem_64">elem 64</option> <option value="elem_65">elem 65</option> <option value="elem_66">elem 66</option> <option value="elem_67">elem 67</option> <option value="elem_68">elem 68</option> <option value="elem_69">elem 69</option> <option value="elem_70">elem 70</option> <option value="elem_71">elem 71</option> <option value="elem_72">elem 72</option> <option value="elem_73">elem 73</option> <option value="elem_74">elem 74</option> <option value="elem_75">elem 75</option> <option value="elem_76">elem 76</option> <option value="elem_77">elem 77</option> <option value="elem_78">elem 78</option> <option value="elem_79">elem 79</option> <option value="elem_80">elem 80</option> <option value="elem_81">elem 81</option> <option value="elem_82">elem 82</option> <option value="elem_83">elem 83</option> <option value="elem_84">elem 84</option> <option value="elem_85">elem 85</option> <option value="elem_86">elem 86</option> <option value="elem_87">elem 87</option> <option value="elem_88">elem 88</option> <option value="elem_89">elem 89</option> <option value="elem_90">elem 90</option> <option value="elem_91">elem 91</option> <option value="elem_92">elem 92</option> <option value="elem_93">elem 93</option> <option value="elem_94">elem 94</option> <option value="elem_95">elem 95</option> <option value="elem_96">elem 96</option> <option value="elem_97">elem 97</option> <option value="elem_98">elem 98</option> <option value="elem_99">elem 99</option> <option value="elem_100">elem 100</option> </select>
@import "http://localhost/shared/components/modules/admin/forms/elements/multiselect/assets/lib/css/multi-select.css"; @import "http://localhost/shared/components/modules/admin/forms/elements/multiselect/assets/custom/less/multiselect.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
BODY You should include the following scripts at the end of the HTML document, right before the closing </body>
tag.
<script src="assets/components/modules/admin/forms/elements/multiselect/assets/lib/js/jquery.multi-select.js?v=v1.2.3"></script> <script src="assets/components/modules/admin/forms/elements/multiselect/assets/custom/js/multiselect.init.js?v=v1.2.3"></script>
<select id="multiselect-optgroup" multiple="multiple"> <optgroup label="Friends"> <option value="1">Yoda</option> <option value="2">Obiwan</option> </optgroup> <optgroup label="Enemies"> <option value="3">Palpatine</option> <option value="4">Darth Vader</option> </optgroup> </select>
@import "http://localhost/shared/components/modules/admin/forms/elements/multiselect/assets/lib/css/multi-select.css"; @import "http://localhost/shared/components/modules/admin/forms/elements/multiselect/assets/custom/less/multiselect.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
BODY You should include the following scripts at the end of the HTML document, right before the closing </body>
tag.
<script src="assets/components/modules/admin/forms/elements/multiselect/assets/lib/js/jquery.multi-select.js?v=v1.2.3"></script> <script src="assets/components/modules/admin/forms/elements/multiselect/assets/custom/js/multiselect.init.js?v=v1.2.3"></script>
<select multiple id="pre-selected-options" class="multiselect" name="pre-selected-options[]"> <option value="elem_1" selected>elem 1</option> <option value="elem_2">elem 2</option> <option value="elem_3">elem 3</option> <option value="elem_4">elem 4</option> <option value="elem_5">elem 5</option> <option value="elem_6">elem 6</option> <option value="elem_7">elem 7</option> <option value="elem_8">elem 8</option> <option value="elem_9">elem 9</option> <option value="elem_10">elem 10</option> <option value="elem_11">elem 11</option> <option value="elem_12">elem 12</option> <option value="elem_13">elem 13</option> <option value="elem_14">elem 14</option> <option value="elem_15">elem 15</option> <option value="elem_16">elem 16</option> <option value="elem_17">elem 17</option> <option value="elem_18">elem 18</option> <option value="elem_19">elem 19</option> <option value="elem_20">elem 20</option> <option value="elem_21">elem 21</option> <option value="elem_22">elem 22</option> <option value="elem_23">elem 23</option> <option value="elem_24">elem 24</option> <option value="elem_25">elem 25</option> <option value="elem_26">elem 26</option> <option value="elem_27">elem 27</option> <option value="elem_28">elem 28</option> <option value="elem_29">elem 29</option> <option value="elem_30">elem 30</option> <option value="elem_31">elem 31</option> <option value="elem_32">elem 32</option> <option value="elem_33">elem 33</option> <option value="elem_34">elem 34</option> <option value="elem_35">elem 35</option> <option value="elem_36">elem 36</option> <option value="elem_37">elem 37</option> <option value="elem_38">elem 38</option> <option value="elem_39">elem 39</option> <option value="elem_40">elem 40</option> <option value="elem_41">elem 41</option> <option value="elem_42" selected>elem 42</option> <option value="elem_43">elem 43</option> <option value="elem_44">elem 44</option> <option value="elem_45">elem 45</option> <option value="elem_46">elem 46</option> <option value="elem_47">elem 47</option> <option value="elem_48">elem 48</option> <option value="elem_49">elem 49</option> <option value="elem_50">elem 50</option> <option value="elem_51">elem 51</option> <option value="elem_52">elem 52</option> <option value="elem_53">elem 53</option> <option value="elem_54">elem 54</option> <option value="elem_55">elem 55</option> <option value="elem_56">elem 56</option> <option value="elem_57">elem 57</option> <option value="elem_58">elem 58</option> <option value="elem_59">elem 59</option> <option value="elem_60">elem 60</option> <option value="elem_61">elem 61</option> <option value="elem_62">elem 62</option> <option value="elem_63">elem 63</option> <option value="elem_64">elem 64</option> <option value="elem_65">elem 65</option> <option value="elem_66">elem 66</option> <option value="elem_67">elem 67</option> <option value="elem_68">elem 68</option> <option value="elem_69">elem 69</option> <option value="elem_70">elem 70</option> <option value="elem_71">elem 71</option> <option value="elem_72">elem 72</option> <option value="elem_73">elem 73</option> <option value="elem_74">elem 74</option> <option value="elem_75">elem 75</option> <option value="elem_76">elem 76</option> <option value="elem_77">elem 77</option> <option value="elem_78">elem 78</option> <option value="elem_79">elem 79</option> <option value="elem_80">elem 80</option> <option value="elem_81">elem 81</option> <option value="elem_82">elem 82</option> <option value="elem_83">elem 83</option> <option value="elem_84">elem 84</option> <option value="elem_85">elem 85</option> <option value="elem_86">elem 86</option> <option value="elem_87">elem 87</option> <option value="elem_88">elem 88</option> <option value="elem_89">elem 89</option> <option value="elem_90">elem 90</option> <option value="elem_91">elem 91</option> <option value="elem_92">elem 92</option> <option value="elem_93">elem 93</option> <option value="elem_94">elem 94</option> <option value="elem_95">elem 95</option> <option value="elem_96">elem 96</option> <option value="elem_97">elem 97</option> <option value="elem_98">elem 98</option> <option value="elem_99">elem 99</option> <option value="elem_100">elem 100</option> </select>
@import "http://localhost/shared/components/modules/admin/forms/elements/multiselect/assets/lib/css/multi-select.css"; @import "http://localhost/shared/components/modules/admin/forms/elements/multiselect/assets/custom/less/multiselect.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
BODY You should include the following scripts at the end of the HTML document, right before the closing </body>
tag.
<script src="assets/components/modules/admin/forms/elements/multiselect/assets/lib/js/jquery.multi-select.js?v=v1.2.3"></script> <script src="assets/components/modules/admin/forms/elements/multiselect/assets/custom/js/multiselect.init.js?v=v1.2.3"></script>